<template>
	<view>
		<view class="header" style="display: flex;" v-if="bond_money-info.protect_money >0 ">
			<view class="" style="margin-right: 14rpx;">
				<u-icon name="rmb-circle-fill" size="22"></u-icon>
			</view>
			<view class="">
				<view class="flex" style="color: #000000;font-size: 30rpx;font-weight: 600;">
					保证金
				</view>
				<view class="" style="color: #000000;font-size: 26rpx;opacity: .5;">
					逾期未补缴店铺已被延长交易账期15天,足额补缴后解除交易账期
				</view>
			</view>
		</view>
		<view class="box">
			<view class="title">
				保证金当前余额(元)
			</view>
			<view class="title" style="font-weight: 400;padding: 20rpx 0;font-size: 64rpx;color: #000000;">
				{{(info.protect_money).toFixed(2) || 0}}
			</view>
			<view class="items">
				<view class="item">
					<view class="" style="color: #000000;opacity: .5;margin-bottom: 6rpx;">
						近30天成交较高类目
					</view>
					<view class="">
						{{catelist}}
					</view>
				</view>
				<view class="" style="background-color: #EDEDED;width: 2rpx;height: 50rpx;">

				</view>
				<view class="item">
					<view class="" style="color: #000000;opacity: .5;margin-bottom: 6rpx;">
						近30天成交金额
					</view>
					<view class="">
						{{total_money.toFixed(2)||0}}
					</view>
				</view>
				<view class="item">
					<view class="" style="color: #000000;opacity: .5;margin-bottom: 6rpx;">
						待补缴保证金
					</view>
					<view class="" style="color: #FF5106;font-size: 32rpx;" v-if="info">
						{{bond_money-info.protect_money <=0?0:(bond_money-info.protect_money).toFixed(2)}}
					</view>
					<view class="" v-else>
						0
					</view>
				</view>
				<view class="" style="background-color: #EDEDED;width: 2rpx;height: 50rpx;">

				</view>
				<view class="item">
					<view class="" style="color: #000000;opacity: .5;margin-bottom: 6rpx;">
						保证金额度(元)
					</view>
					<view class="" style="font-size: 32rpx;">
						{{bond_money}}
					</view>
				</view>
			</view>
			<view class="btns" style="justify-content: center;">
				<!-- 	<view class="btn">
					提现
				</view> -->
				<view class="btn1" v-if="bond_money-info.protect_money > 0" @click="bj">
					立即补缴
				</view>
				<view class="btn1" v-else style="background-color: #676767;color: grey;">
					无需补缴
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="tab" @click="his">
				<image src="https://fen.fuliaoxx.com/img/new/img2.png" mode=""></image>
				<view class="">
					账单明细
					<view class="" style="color: #9E9E9E;">
						查看账单明细
					</view>
				</view>
				<u-icon name="arrow-right" color="#9E9E9E"></u-icon>
			</view>
			<view class="tab" @click="xy">
				<image src="https://fen.fuliaoxx.com/img/new/img1.png" mode=""></image>
				<view class="">
					保证金规则
					<view class="" style="color: #9E9E9E;">
						查看规则
					</view>
				</view>
				<u-icon name="arrow-right" color="#9E9E9E"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					protect_money: 0
				},
				total_money: 0,
				catelist: "--",
				bond_money: 0
			}
		},
		async onShow() {
			await uni.request({
				url: '/index/shopInfo',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					res.data.shopInfo.protect_money = Number(res.data.shopInfo.protect_money);
					this.info = res.data.shopInfo;

				}
			});
			await uni.request({
				url: '/index/getBondInfo',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					console.log(res)
					this.total_money = res.data.total_money;
					this.bond_money = Number(res.data.bond_money);
					if (res.data.catelist.length == 0) {
						this.catelist = "--"
					}
					if (res.data.catelist.length == 1) {
						this.catelist = `${res.data.catelist[0].name}`
					}
					if (res.data.catelist.length == 2) {
						this.catelist = `${res.data.catelist[0].name}/${res.data.catelist[1].name}`
					}
					if (res.data.catelist.length >= 3) {
						this.catelist =
							`${res.data.catelist[0].name}/${res.data.catelist[1].name}/${res.data.catelist[2].name}`
					}
				}
			});
		},
		methods: {
			his() {
				uni.navigateTo({
					url: "/pagesA/history/history"
				})
			},
			bj() {
				uni.navigateTo({
					url: "/pagesA/bj/bj?money=" + (this.bond_money - this.info.protect_money)
				})
			},
			xy() {
				uni.navigateTo({
					url: "/pagesA/xieyi/xieyi"
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		overflow: auto;
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.tabs {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;

		.tab {
			display: flex;
			align-items: center;
			background-color: white;
			border-radius: 12rpx;
			padding: 20rpx;
			justify-content: space-between;
			width: calc(50% - 20rpx);

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.box {
		border-radius: 20rpx;
		margin: 30rpx;
		background-color: white;
		padding: 30rpx;
	}

	.btns {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.btn {
			width: 45%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #F8F8F8;
			color: black;
			border-radius: 100px;
		}

		.btn1 {
			width: 45%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #000000;
			color: white;
			border-radius: 100px;
		}
	}

	.title {
		text-align: center;
	}

	.items {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.item {
			width: 49%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;

		}
	}

	.header {
		background-color: #FFC400;
		margin: 30rpx;
		border-radius: 30rpx;
		padding: 30rpx;
	}
</style>